<template>
    <my-list
        v-if="$data.columns && $data.columns.length"
        ref="list"
        :model-value="tableData"
        noQueryPart
        noIndexColumn
    >
        <el-table-column type="index" align="center" width="60" class-name="el-cell-index">
            <template #header="scope">
                <el-button type="primary"
                           :icon="View"
                           @click="view_open_click" size="small"
                           style="width:30px;padding:8px;"
                ></el-button>
            </template>
        </el-table-column>
        <el-table-column v-for="column in show_columns"
                         :key="column"
                         :label="column"
                         align="center">
            <template v-slot="scope">
                <el-tag v-if="needTag(column, scope.row[column])">
                    {{ displayTag(scope.row[column]) }}
                </el-tag>
                <div v-else-if="column === '_id' || column == 'id' || column=='name' " class="strong">
                    {{ suit(display(scope.row[column])) }}
                </div>
                <el-button v-else-if="needButton(column,scope.row[column])">查看</el-button>
                <template v-else>{{ suit(display(scope.row[column])) }}</template>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center">
            <template v-slot="scope">
                <el-button type="warning" plain round @click="delete_click(scope.row)" size="small">
                    删除
                </el-button>
            </template>
        </el-table-column>

        <template #head="scope">
            <div>{{title}}:</div>
            <el-dialog title="设置显示列" append-to-body v-model="$data.view_dlg" width="80vw"
                       :close-on-click-modal="true">

                <kv label="显示列">
                    <el-tag disable-transitions v-for="c in show_columns" :key="c" @click="$data.excludes.push(c)"
                            >{{ c }}
                    </el-tag>
                </kv>

                <kv label="隐藏列">
                    <el-tag disable-transitions type="warning" v-for="c in $data.excludes" @click="$data.excludes.removeItem(c)"
                            :key="c">{{ c }}
                    </el-tag>
                </kv>


                <el-button @click="show_ok_click">确定</el-button>
            </el-dialog>
        </template>
    </my-list>
</template>
<script setup>
/**
 * Created by CodeGenerator at 2021-04-13 19:37:26
 */
import previewJsonRow from "./preview-json-row.vue"
import {Setting, CirclePlus, Remove, CaretBottom, CaretTop,View} from '@element-plus/icons-vue'




defineOptions({
    name: "preview-json-list",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
    "excludes":[],
    "view_dlg":false,
    columns:[]
});


const $props = defineProps({
    title : { type: String }
});


const $model = defineModel({ type: Array });


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const tableData = $computed( function() {
    return {data: $model.value }
});

const show_columns = $computed( function() {
    var timeColumns = $data.columns.filter(it =>
        it.includes("Date") ||
        it.includes("date") ||
        it.includes("Time") ||
        it.includes("time") ||
        it.includes("At")
    );
    var objColumns = [];
    var one = $model.value[0];
    Object.keys(one).filter(it => {
        var v = one[it];
        if (v && !v.isSimpleType()) {
            objColumns.push(it);
        }
    });
    if ($data.columns.length > 6 && !$data.excludes.length) {
        $data.excludes.addAll(timeColumns).addAll(objColumns);
    }
    return $data.columns.minus($data.excludes);
});


const view_open_click = function() {
    $data.view_dlg = true;
};
const show_ok_click = function() {
    $data.view_dlg = false;
    jv.$saveData("excludes",$data.excludes);
    this.version = Date.now()
};
const setTitle = function() {
    var set = [];
    if (this.row.id) {
        set.push(this.row.id)
    }
    if (this.row.name) {
        set.push(this.row.name)
    }
    $props.title = set.filter(it => it).join(" : ")
};


const analyse = function() {
    var previewData = $model.value;
    if ( previewData.data ) {
        return;
    }
    var cs = new Set();
    previewData.forEach(row => {
        Object.keys(row).forEach(column => {
            var value = row[column];
            if (jv.isNull(value)) {
                return;
            }
            var valueType = value.getJsType();
            if (valueType == "object" || valueType == "function") {
                return;
            }
            if (valueType == "array" && !value.length) {
                return;
            }
            if (valueType == "string" && !value) {
                return;
            }
            cs.add(column);
        })
    });
    var cs2 = [];
    cs2.addAll(cs);
    $data.columns = cs2.sort(jv.getKeySorter());
    $data.version = Date.now()
};
const needButton = function(c,v){
    if( !v) return false;
    return !v.isSimpleType();
};
const needTag = function(c, v) {
    if (jv.isNull(v)) return false;
    var type = v.getJsType();
    if (type == "array") {
        return true;
    }
    if (v === "true" || v === "false" || type == "boolean") {
        return true;
    }
};
const displayTag = function(v) {
    if (jv.isNull(v)) return v;
    var type = v.getJsType();
    if (type == "array") {
        return v.length;
    }
    return v;
};
const row_click = function(row) {
    this.row = row;
    this.dlg_show = true;
    setTitle();
};
const delete_click = function(row) {
    var rowId = row._id || row.id;
    var rowName = row.name || rowId;
    jv.confirm('确认删除 ' + rowName + ' 吗？').then(res => {
        $emit("delete", row);
    });
};

onMounted(()=>{
    jv.$loadData("excludes",v=> $data.excludes = v);

    var value = $model.value;
    if ( value &&  value.length) {
        $data.columns =  Object.keys(value[0])
    }

    analyse();
})


const display = function (obj) {
    if (!obj) return obj;

    var type = obj.getJsType();
    if (type == "string") {
        return obj;
    }
    if (type == "number") {
        return obj;
    }

    if (type == "array") {
        return "[" + obj.length + "]"
    }

    if (type === "boolean") {
        return obj;
    }

    return JSON.stringify(obj);
}
const suit = function(v) {
    if (!v) return v;
    var len = v.length;
    if (jv.isNull(len)) {
        return v;
    }
    if (len < 50) return v;
    if (!v.slice) {
        return v;
    }
    return v.slice(0, 47) + " ...";
}

</script>

<style lang="scss" scoped>
.strong {
    background-color: #5a22ff;
    color: white;
    zoom: 1.02;
    border-radius: 6px;
    padding: 2px 4px;
    display: inline-block;
}

/*productline*/
.pl {
    border-bottom: solid 1px gray;
    margin: 8px;
    display: inline-block;
    padding: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 10px;
    position: relative;
    z-index: 9;
}

/*title*/
.ti {
    font-weight: bold;
    margin: 4px;
    display: inline-block;
    border-radius: 8px;
    background-color: darkblue;
    padding: 2px 5px;
    color: white;
}

.row {
    display: block;
    font-size: small;
    margin-left: 16px;
}

.pl:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.3;
    border-radius: 10px;
    z-index: -999;
}


a {
    background-color: #485385;
    padding: 0 4px;
    margin: 2px 4px;
    color: white;
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    zoom: 1.02;
}

</style>